<template>
  <div>
    <nx-tree-table
      :data="data"
      :columns="columns"
      border
      :scopedSlots="scopedSlots"
    >
      <span slot="property" slot-scope="scope">
        <template>{{ scope.row.property }}</template>
      </span>
      <div slot="paramvalue" slot-scope="scope">
        <div
          v-if="
            scope.row.isfirst !== true &&
              scope.row.variabletype !== 'Object' &&
              scope.row.variabletype !== 'Array'
          "
        >
          <span
            class="ant-input-search ant-input-affix-wrapper"
            data-v-a1ccd506=""
          >
            <input
              placeholder="选择赋值"
              type="text"
              v-model="scope.row.paramvalue"
              class="ant-input"/><span
              class="ant-input-suffix"
              @click="selectControl(scope.row)"
              ><i
                aria-label="图标: search"
                tabindex="-1"
                class="anticon anticon-search ant-input-search-icon"
                ><svg
                  viewBox="64 64 896 896"
                  data-icon="search"
                  width="1em"
                  height="1em"
                  fill="currentColor"
                  aria-hidden="true"
                  focusable="false"
                  class=""
                >
                  <path
                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
                  ></path></svg></i></span
          ></span>
        </div>
      </div>
    </nx-tree-table>
    <zhlDialog
      title="控件选择"
      ref="seleccontrolDialog"
      width="1260px"
      class="my-dialog"
    >
      <selectcontrol
        :fromdata="fromInfo"
        @selectconfirm="selectconfirm"
      ></selectcontrol>
    </zhlDialog>
  </div>
</template>
<script>
import nxTreeTable from '@/components/nx-tree-table'
import { variabletype } from '@/components/formdesign/variabletype.js'
import selectcontrol from '@/components/formdesign/selectcontrol'
export default {
  components: { nxTreeTable, selectcontrol },
  props: ['param', 'paramurl'],
  data() {
    return {
      scopedSlots: ['property', 'required', 'paramtype', 'paramvalue'],
      columns: [
        {
          text: '参数名称',
          value: 'property',
          width: 200
        },
        {
          text: '参数类型',
          value: 'variabletype',
          width: 90
        },
        {
          text: '赋值',
          value: 'paramvalue'
        }
      ],
      data: [
        {
          property: 'body',
          required: false,
          paramtype: '',
          paramname: 'Post参数',
          variabletype: 'Object',
          paramvalue: '',
          children: [],
          isfirst: true
        },
        {
          property: '$query',
          required: false,
          paramtype: '',
          variabletype: 'Object',
          paramvalue: '',
          children: [],
          isfirst: true
        },
        {
          property: '$header',
          required: false,
          paramtype: '',
          variabletype: 'Object',
          paramvalue: '',
          children: [],
          isfirst: true
        }
      ],
      selectRow: {},
      fromInfo: this.changeFromInfo()
    }
  },
  methods: {
    getJSONStr() {
      let cache = []
      const str = JSON.stringify(this.data, (key, value) => {
        if (typeof value === 'object' && value !== null) {
          if (cache.indexOf(value) !== -1) {
            // Circular reference found, discard key
            return
          }
          // Store value in our collection
          cache.push(value)
        }
        return value
      })
      cache = null
      return str
    },
    loadAll() {
      return variabletype
    },
    querySearch(queryString, cb) {
      const restaurants = this.loadAll()
      const results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        )
      }
    },
    handleSelect(row) {
      const restaurants = this.loadAll()
      for (let i = 0; i < restaurants.length; i++) {
        if (restaurants[i].value === row.paramtype) {
          row.description = restaurants[i].name
          continue
        }
      }
    },
    loadData(param, paramurl) {
      this.data[0].children = param
      if (paramurl instanceof Array) {
        this.data[1].children = paramurl
      } else {
        for (const key in paramurl) {
          this.data[1].children.push({
            property: key,
            required: false,
            paramtype: '',
            paramname: '',
            variabletype: '常量',
            children: [],
            isfirst: false
          })
        }
      }
    },
    assemblyObjectData(dataobj) {
      const dataArrylist = []
      for (const keystr in dataobj) {
        if (dataobj[keystr] instanceof Array) {
          const itemdata = {
            property: keystr,
            required: false,
            paramtype: '',
            paramname: '',
            variabletype: 'Array',
            children: [],
            isfirst: false
          }
          itemdata.children = this.assemblyObjectData(dataobj[keystr][0])
          dataArrylist.push(itemdata)
        } else if (dataobj[keystr] instanceof Object) {
          const itemdata = {
            property: keystr,
            required: false,
            paramtype: '',
            paramname: '',
            variabletype: 'Object',
            children: [],
            isfirst: false
          }
          itemdata.children = this.assemblyObjectData(dataobj[keystr])
          dataArrylist.push(itemdata)
        } else {
          dataArrylist.push({
            property: keystr,
            required: false,
            paramtype: '',
            paramname: '',
            variabletype: '常量',
            children: [],
            isfirst: false
          })
        }
      }
      return dataArrylist
    },
    selectControl(row) {
      this.selectRow = row
      this.$refs.seleccontrolDialog.visible = true
    },
    selectconfirm(type, element) {
      if (type === 'control') {
        this.selectRow.paramvalue = element.options.filed
      } else {
        this.selectRow.paramvalue = element
      }
      this.$refs.seleccontrolDialog.visible = false
    }
  },
  watch: {
    SetChangeFromInfo(val) {
      this.fromInfo = val
    }
  },
  computed: {
    SetChangeFromInfo() {
      return this.changeFromInfo()
    }
  },
  created() {
    this.loadData(this.param, this.paramurl)
  },
  inject: ['changeFromInfo']
}
</script>
